<!-- testing/Tabbar.vue -->
<template>
  <div>
    我就是我
    <mt-tabbar v-model="selected">
      <mt-tab-item id="shouye">首页
        <img slot="icon" v-if="selected=='shouye'" 
             src="../assets/main_1.png" alt="">
        <img slot="icon" v-else src="../assets/main_0.png" alt="">
      </mt-tab-item>
      <mt-tab-item id="gouwuche">购物车
        <img slot="icon" v-if="selected=='gouwuche'" 
             src="../assets/cart_1.png" alt="">
        <img slot="icon" v-else src="../assets/cart_0.png" alt="">
      </mt-tab-item>
      <mt-tab-item id="wode">我的
        <img slot="icon" v-if="selected=='wode'" 
             src="../assets/me_1.png" alt="">
        <img slot="icon" v-else src="../assets/me_0.png" alt="">
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected: 'wode'
    }
  },
  watch: {
    /** 当selected的值发生变化时，执行该方法 */
    selected(newval, oldval){
      console.log(`new: ${newval}, old: ${oldval}`);
      // 根据newval的目标地的不同，跳转到相应页面即可。
      if(newval=='shouye'){
        this.$router.push('/tabbar');
      }else if(newval=='gouwuche'){
        this.$router.push('/gouwuche');
      }
    }
  }
}
</script>




